<template>
  <div style="padding: 40px" class="content1">
    <div id="container" style="width: 100%; height: 700px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "Notice",

  data() {
    return {
      form: {
        "medicationReminder": 0,
        "name": "",
        "steps": 0,
        "waterIntake": 0
      },
      form1: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      ttid: '',
      ttcontent: '',
      tpubTime: '',
      ttitle: '',
      map: null,
      driving: null,
      geolocation: null // 添加定位服务实例
    }
  },
  created() {
    this.load();
  },
  mounted() {
    this.loadAMapScript();
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    load() {
      // 这里可以添加加载数据的逻辑
      console.log('加载数据');
    },
    loadAMapScript() {
      const script = document.createElement('script');
      script.src = `https://webapi.amap.com/maps?v=1.4.15&key=e12fc5af85b62771feaf5a56637b29e0&plugin=AMap.Geolocation,AMap.Driving&callback=initAMap`;
      script.onload = () => {
        console.log('高德地图脚本加载完成');
        this.initAMap();
      };
      script.onerror = () => {
        console.error('高德地图脚本加载失败');
      };
      document.body.appendChild(script);

      // 假设 Ne.userInfo 是从 Vuex 获取的
      const userInfo = this.userInfo;
      if (userInfo) {
        const { wxAvatar } = userInfo;
        // 继续处理 wxAvatar
      } else {
        console.error('userInfo is null or undefined');
        // 处理 userInfo 为空的情况
      }
    },
    initAMap() {
      if (typeof AMap === 'undefined') {
        console.error('高德地图未加载');
        return;
      }

      console.log('初始化地图');
      this.map = new AMap.Map('container', {
        zoom: 10, // 设置地图显示的缩放级别
        center: [116.397428, 39.90923] // 设置地图中心点坐标
      });

      // 初始化定位服务
      this.geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：无穷大
        buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
      });

      this.map.addControl(this.geolocation);

      this.geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          console.log('定位成功', result);
          this.addMarker(result.position);
          this.map.setCenter(result.position);
        } else {
          console.error('定位失败', result);
          // 定位失败时，添加默认标记
          this.addMarker([116.397428, 39.90923]);
        }
      });

      // 初始化路线规划
      this.initDriving();
    },
    addMarker(position) {
      if (position && position.lng !== undefined && position.lat !== undefined) {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(position.lng, position.lat), // 经纬度对象
          title: '标记位置'
        });
        this.map.add(marker);
      } else {
        console.error('无效的位置信息', position);
      }
    },
    initDriving() {
      if (typeof AMap.Driving !== 'undefined') {
        this.driving = new AMap.Driving({
          map: this.map,
          panel: 'panel'
        });

        // 添加路线规划
        this.calculateRoute();
      } else {
        console.error('AMap.Driving 未加载');
      }
    },
    calculateRoute() {
      const start = [116.397428, 39.90923]; // 起点
      const end = [116.407428, 39.91923]; // 终点

      this.driving.search(start, end, (status, result) => {
        if (status === 'complete') {
          console.log('驾车路线规划成功');
        } else {
          console.error('驾车路线规划失败', result);
        }
      });
    }
  }
};
</script>

<style>
.content1 {
  flex: 1;
  background: rgba(255, 255, 255, 0.7);
  padding: 30px;
  box-sizing: border-box;
}
.chart {
  margin-bottom: 20px;
}

#container {
  height: 600px;
  width: 100%;
}
.home-container {
  padding: 20px;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}

.chart {
  width: 45%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
